<template>
  <div class="mdl_tips">
    <div class="sign_tips">
      <ul v-if="tipsType === 'schedule'">
        <li>提示：</li>
        <li v-for="(item, index) in signtipsData" :key="index"><i :style="{backgroundColor:item.color}"></i><span>{{item.status}}</span></li>
      </ul>
      <ul v-if="tipsType === 'template'">
        <li>提示：</li>
        <li v-for="(item, index) in signtipsData2" :key="index"><i :style="{backgroundColor:item.color}"></i><span>{{item.status}}</span></li>
      </ul>
    </div>
    <div class="send_tips">
      <slot name="sendTips"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tipsType: {
      type: String,
      default: 'schedule' // schedule\template
    }
  },
  data() {
    return {
      signtipsData: [
        {
          color: '#0bd677',
          status: '正常预约'
        },
        {
          color: '#1890FF',
          status: '计划排班'
        },
        {
          color: '#FF8618',
          status: '暂停预约'
        },
        {
          color: '#E37470',
          status: '节假日'
        },
        {
          color: '#FF8618',
          status: '设备故障'
        },
        {
          color: '#919398',
          status: '新增'
        }
      ],
      signtipsData2: [
        {
          color: '#1890FF',
          status: '启用'
        },
        {
          color: '#E37470',
          status: '停用'
        },
        {
          color: '#919398',
          status: '新增'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
ul,li{
  padding: 0;
  margin:0;
}
.mdl_tips{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .sign_tips{
    font-size: 14px;
    padding: 4px 0;
    ul{
      overflow: hidden;
      li{
        float: left;
        margin-right: 10px;
        i{
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 6px;
        }
      }
    }
  }
  .send_tips{
    color: #f00;
  }
}
</style>
